<template>
<div>
  <template>
    <el-table
        style="width:100%;z-index:0"
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        v-loading="loading"
        element-loading-text="拼命加载中"
    >
      <el-table-column
          prop="peopleID"
          sortable
          label="编号">
        <template slot-scope="scope" >
          <label v-show="!scope.isEdit">{{scope.row.peopleID}}</label>
        </template>

      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="old"
          sortable
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="nation"
          label="民族">
      </el-table-column>
      <el-table-column
          prop="face"
          label="政治面貌">
      </el-table-column>
      <el-table-column
          prop="learn"
          label="文化程度">
      </el-table-column>
      <el-table-column
          prop="work"
          label="工作">
      </el-table-column>
      <el-table-column
          prop="comeTime"
          sortable
          label="入职日期">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="money"
          sortable
          label="工资">
      </el-table-column>
      <el-table-column
          prop="id"
          sortable
          label="部门ID">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="100">
        <template slot="header">
          <el-input
              placeholder="输入姓名"
              slot="header"
              v-model="search"
              size="mini"
              type="text"
          />
        </template>
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope)" type="text" size="small">编辑</el-button>
          <el-popconfirm
              confirm-button-text='Yes'
              cancel-button-text='No'
              icon="el-icon-info"
              icon-color="red"
              title="您确定么？"
              @confirm="handleDelete(scope)"
          >
            <el-button slot="reference" type="text" size="small" >离职</el-button>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>

  </template>
  <el-drawer
      title="修改数据"
      :visible.sync="isEdit"
      :direction="direction"
      :before-close="handleClose">
    <el-form :model="form" z-index="3">
      <el-form-item label="编号">
        <el-input v-model="form.peopleID"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.old"/>
      </el-form-item>
      <el-form-item label="民族">
        <el-input v-model="form.nation"/>
      </el-form-item>
      <el-form-item label="政治面貌">
        <el-input v-model="form.face"/>
      </el-form-item>
      <el-form-item label="文化程度">
        <el-input v-model="form.learn"/>
      </el-form-item>
      <el-form-item label="工作">
        <el-input v-model="form.work"/>
      </el-form-item>
      <el-form-item label="入职日期">
        <el-input v-model="form.comeTime"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="form.sex"/>
      </el-form-item>
      <el-form-item label="工资">
        <el-input v-model="form.money"/>
      </el-form-item>
      <el-form-item label="部门ID">
        <el-input v-model="form.id"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</div>
</template>

<script>
//import axios from "axios";


import {DateTurn, HttpManager} from "@/api";

export default {
  name: "Tab1",
  data(){
    return{
      tableData:[],
      search:'',
      isEdit:false,
      direction:'rtl',
      form:{
        peopleID:'',
        name:'',
        old:'',
        nation:'',
        face:'',
        learn:'',
        work:'',
        comeTime:new Date(),
        sex:'',
        money:'',
        id:0
      },
      person:"",
      loading:true
    }
  },
  methods:{
    handleEdit(scope){
      this.isEdit = true
      this.form = scope.row
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done(_);
          })
          .catch(_ => {_});
    },
    submit(){
      this.person  = new URLSearchParams();
      this.person.append("people",JSON.stringify(this.form))
      HttpManager.updatePeople(this.person);
    },
    handleDelete(scope){
      this.person  = new URLSearchParams();
      this.person.append("peopleID",scope.row.peopleID)
      HttpManager.deletePeople(this.person);
      HttpManager.getAllPeople().then(
          (response) => {
            for (let i = 0;i < response.length;i++) {
              //格式化日期的格式,不然会显示13位的数字
              response[i].comeTime = DateTurn.timeToString(response[i].comeTime)
            }
            this.tableData = response
          }
      )
    }
  },
  created() {
    /*axios.get('http://localhost:8080/proxy_1/people/selectPeople').then(
        response => {
          console.log('success',response.data);
          for (const num of response.data) {
            this.tableData.push(num);
          }

        },
        error =>{
          console.log('error',error.message);
        }
    )*/
    HttpManager.getAllPeople().then(
        (response) => {
          for (let i = 0;i < response.length;i++) {
            //格式化日期的格式,不然会显示13位的数字
            response[i].comeTime = DateTurn.timeToString(response[i].comeTime)
          }
          this.tableData = response
        }
    )

    this.loading = true
  },
  updated() {
    this.loading = false
  }

}
</script>

<style scoped>
body{
  margin: 0;
}
</style>
